<template>
	<view class="flex-col page">
		 <view class="prefecture" v-for="item in detailList" v-if="item.title!=='热销商品 HOT SALE' && item.title!=='热销商品' && item.title!=='严选二手'">
		 <!-- <view class="prefecture"> -->
		  <view >
			 <view style="height:100rpx;background: linear-gradient(to bottom, #c6e0fb 0%,#FFF  100%); ">
				 <view style="font-weight: bold;font-size: 28rpx;padding:20rpx ;">
					{{item.title}}
				 </view>
			</view>
		    <view class="flex-row  section_12 space-x-12">
			<!-- 	<image
				 style="width: 198rpx;
				  height: auto;"
				  :src="item.imgUrl"
				/> -->

				<scroll-view class="prefecture_line_con" scroll-x>
				  <view class="prefecture_line_con_min" v-for="item1 in item.newProduct" @click="$Router.push({ path: '/pages/goods/detail', query: { id: item1.id } })">
					 <view class="flex-col">
						<view class="flex-row group_13">
						  <image
							class="image_5"
							mode="aspectFill" :src="item1.imgUrl"
						  />
						</view>
						<view class="flex-col">
						  <view class="flex-row space-x-6">
							<text class="font_11">{{item1.title}}</text>
						  </view>
						</view>
						<view class="flex-row group_15 space-x-44">
						  <text class="font_12">¥{{item1.price}}</text>
						</view>
					 </view>
				  </view>
				</scroll-view>
		   
		    </view>
		  </view>
		  </view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
			};
		},
		props: ['detailList'],
		created() {
			console.log('专区',this.detailList)
		},
		methods: {
		}
	};
</script>

<style lang="scss">
.page {
  background-color: #f5f5f7;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  margin-top: -8rpx;
  padding: 116rpx 0 12rpx;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649574712864576.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.prefecture{
	  width: 702rpx;
	  /* height:470rpx; */
	  border-radius: 8rpx;
	  margin: 24rpx;
	  box-sizing: border-box;
	}
.text {
  margin-left: 28rpx;
  color: #000000;
  font-size: 32rpx;
  font-family: PingFangSC;
  line-height: 30rpx;
}
.image {
  margin: 28rpx 24rpx 0;
  width: 702rpx;
  height: 340rpx;
}
.equal-division {
  margin-top: 28rpx;
}
.group {
  flex: 1 1 188rpx;
}
.equal-division-item {
  padding-left: 24rpx;
  padding-right: 16rpx;
}
.image_2 {
  width: 29rpx;
  height: 29rpx;
}
.font_1 {
  font-size: 28rpx;
  font-family: PingFangSC;
  line-height: 24rpx;
  color: #999999;
}
.text_2 {
  line-height: 26rpx;
}
.group_2 {
  padding: 6rpx 24rpx 24rpx;
}
.space-y-30 > view:not(:first-child),
.space-y-30 > text:not(:first-child),
.space-y-30 > image:not(:first-child) {
  margin-top: 60rpx;
}
.space-y-12 > view:not(:first-child),
.space-y-12 > text:not(:first-child),
.space-y-12 > image:not(:first-child) {
  margin-top: 24rpx;
}
.image-wrapper {
  padding: 28rpx 0;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0px 2rpx 4rpx #0000000f;
}
.image_3 {
  width: 642rpx;
  height: 134rpx;
}
.section_2 {
  padding: 0 24rpx 28rpx;
  overflow: hidden;
  border-radius: 8rpx;
  background-color: #35283c;
}
.group_3 {
  padding: 32rpx 0;
}
.space-x-6 > view:not(:first-child),
.space-x-6 > text:not(:first-child),
.space-x-6 > image:not(:first-child) {
  margin-left: 12rpx;
}
.font_2 {
  font-size: 40rpx;
  font-family: PingFangSC;
  line-height: 29rpx;
  font-weight: 600;
  color: #ff3b30;
}
.text_3 {
  color: transparent;
  line-height: 37rpx;
  background-image: linear-gradient(90deg, #ff9db4 0%, #ff93fe 100%);
  -webkit-background-clip: text;
}
.font_3 {
  font-size: 24rpx;
  font-family: PingFangSC;
  line-height: 24rpx;
  color: #ffffff;
}
.section_3 {
  padding: 8rpx 12rpx;
  background-image: linear-gradient(90deg, #d852f8 8.5%, #fa61a8 114.1%);
  border-radius: 4rpx;
  height: 36rpx;
}
.space-x-2 > view:not(:first-child),
.space-x-2 > text:not(:first-child),
.space-x-2 > image:not(:first-child) {
  margin-left: 4rpx;
}
.text_4 {
  color: #ffffff;
  font-size: 26rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 19rpx;
}
.image_4 {
  width: 10rpx;
  height: 16rpx;
}
.equal-division_2 {
  position: relative;
}
.section_4 {
  padding: 8rpx 0 28rpx;
  overflow: hidden;
  border-radius: 8rpx;
  background-color: #ffffff;
}
.group_4 {
  margin-left: 12rpx;
}
.image_5 {
  margin-bottom: 20rpx;
  width: 200rpx;
  height: 190rpx;
}
.font_4 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 24rpx;
  color: #000000;
}
.text_5 {
  margin-top: -8rpx;
}
.font_5 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 18rpx;
  color: #f60000;
}
.text_6 {
  margin-top: 12rpx;
  line-height: 17rpx;
}
.group_5 {
  position: absolute;
  left: 169rpx;
  top: 6rpx;
}
.group_6 {
  position: absolute;
  right: 171rpx;
  top: 6rpx;
}
.group_7 {
  position: absolute;
  right: 13rpx;
  top: 6rpx;
}
.equal-division-item_2 {
  padding: 8rpx 0;
  width: 158rpx;
}
.section_5 {
  padding-bottom: 308rpx;
  flex: 1 1 338rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  height: 376rpx;
}
.section_6 {
  background-image: linear-gradient(180deg, #b4d2ff 0%, #ffffff 100%);
  border-radius: 16rpx 16rpx 0px 0px;
  height: 68rpx;
}
.section_9 {
  padding: 0 28rpx 10rpx 34rpx;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649578158667253.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.space-y-96 > view:not(:first-child),
.space-y-96 > text:not(:first-child),
.space-y-96 > image:not(:first-child) {
  margin-top: 192rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 30rpx;
}
.text-wrapper {
  padding: 4rpx 0 12rpx;
  background-color: #2e80fe;
  border-radius: 4rpx;
  width: 96rpx;
}
.font_6 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 18rpx;
  font-weight: 600;
  color: #ffffff;
}
.text_7 {
  line-height: 15rpx;
}
.font_9 {
  font-size: 28rpx;
  font-family: PingFangSC;
  line-height: 24rpx;
  font-weight: 600;
  color: #ff3b30;
}
.text_9 {
  color: #000000;
  font-size: 30rpx;
  line-height: 28rpx;
}
.text-wrapper_3 {
  padding: 16rpx 0 12rpx;
  background-color: #2e80fe;
  border-radius: 27rpx;
}
.font_10 {
  font-size: 28rpx;
  font-family: PingFangSC;
  line-height: 24rpx;
  font-weight: 600;
  color: #ffffff;
}
.text_10 {
  line-height: 26rpx;
}
.group_8 {
  flex: 1 1 338rpx;
}
.section_7 {
  padding-bottom: 26rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}
.section_8 {
  background-image: linear-gradient(180deg, #ffe8e1 0%, #ffffff 100%);
  border-radius: 16rpx 16rpx 0px 0px;
  height: 48rpx;
}
.font_8 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 15rpx;
  color: #000000;
}
.text_8 {
  margin-left: 36rpx;
  margin-top: 28rpx;
}
.text-wrapper_2 {
  padding: 8rpx 0;
  background-color: #2e80fe;
  border-radius: 27rpx;
  width: 89rpx;
}
.view {
  margin-left: 36rpx;
  margin-top: 28rpx;
}
.image_6 {
  width: 166rpx;
  height: 166rpx;
}
.pos {
  position: absolute;
  right: 16rpx;
  top: 50%;
  transform: translateY(-50%);
}
.font_7 {
  font-size: 26rpx;
  font-family: PingFangSC;
  line-height: 24rpx;
  font-weight: 600;
  color: #000000;
}
.pos_3 {
  position: absolute;
  left: 37rpx;
  top: 38rpx;
}
.section_10 {
  padding-bottom: 12rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}
.group_9 {
  padding-bottom: 120rpx;
}
.section_11 {
  background-image: linear-gradient(180deg, #fffbec 0%, #ffffff 100%);
  border-radius: 16rpx 16rpx 0px 0px;
  height: 48rpx;
}
.pos_5 {
  position: absolute;
  left: 38rpx;
  top: 38rpx;
}
.image_7 {
  width: 154rpx;
  height: 154rpx;
}
.pos_4 {
  position: absolute;
  right: 16rpx;
  bottom: 0;
}
.pos_6 {
  position: absolute;
  left: 37rpx;
  top: 76rpx;
}
.pos_7 {
  position: absolute;
  left: 36rpx;
  top: 120rpx;
}
.text-wrapper_4 {
  padding: 12rpx 0 200rpx;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649582688656839.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.text_11 {
  margin-left: 32rpx;
  line-height: 26rpx;
}
.section_12 {
  background-color: #ffffff;
  border-radius: 16rpx;
}
.text-wrapper_5 {
  padding: 12rpx 0 200rpx;
  width: 198rpx;
  height: 240rpx;
}
.text_12 {
  line-height: 26rpx;
}
.group_10 {
  margin: 0 32rpx;
}
.space-y-6 > view:not(:first-child),
.space-y-6 > text:not(:first-child),
.space-y-6 > image:not(:first-child) {
  margin-top: 12rpx;
}
.space-x-14 > view:not(:first-child),
.space-x-14 > text:not(:first-child),
.space-x-14 > image:not(:first-child) {
  margin-left: 28rpx;
}
.image_8 {
  width: 128rpx;
  height: 128rpx;
}
.image_9 {
  flex: 1 1 128rpx;
}
.image_10 {
  flex: 1 1 128rpx;
}
.image_11 {
  flex: 1 1 128rpx;
}
.group_11 {
  padding: 0 16rpx;
}
.font_11 {
  font-size: 20rpx;
  font-family: PingFangSC;
  margin: 5rpx;
  width: 200rpx;
   /* 强制不换行 */
      white-space: nowrap;
      /* 匀速溢出内容，隐藏 */
      overflow: hidden;
      /* 文字用省略号代替超出的部分 */
      text-overflow: ellipsis;
  color: #333333;
}
.group_12 {
  padding-left: 36rpx;
  padding-right: 28rpx;
}
.font_12 {
  font-size: 25rpx;
  font-family: PingFangSC;
  line-height: 13rpx;
  font-weight: 600;
  color: #ff3b30;
}
.space-x-12 > view:not(:first-child),
.space-x-12 > text:not(:first-child),
.space-x-12 > image:not(:first-child) {
  margin-left: 24rpx;
}
.text-wrapper_6 {
  padding: 12rpx 0 200rpx;
  width: 198rpx;
  height: 240rpx;
}
.group_13 {
  padding: 0 12rpx;
}
.image_12 {
  margin: 8rpx 0 8rpx 8rpx;
}
.group_14 {
  padding: 0 24rpx;
}
.space-x-32 > view:not(:first-child),
.space-x-32 > text:not(:first-child),
.space-x-32 > image:not(:first-child) {
  margin-left: 64rpx;
}
.group_15 {
  margin-top: 12rpx;
  padding: 0 40rpx;
}
.space-x-44 > view:not(:first-child),
.space-x-44 > text:not(:first-child),
.space-x-44 > image:not(:first-child) {
  margin-left: 88rpx;
}
.space-y-14 > view:not(:first-child),
.space-y-14 > text:not(:first-child),
.space-y-14 > image:not(:first-child) {
  margin-top: 28rpx;
}
.space-x-8 > view:not(:first-child),
.space-x-8 > text:not(:first-child),
.space-x-8 > image:not(:first-child) {
  margin-left: 16rpx;
}
.text_13 {
  margin-left: 20rpx;
  color: #000000;
  font-size: 36rpx;
  font-family: PingFangSC;
  line-height: 33rpx;
}
.image_13 {
  opacity: 0.83;
  width: 52rpx;
  height: 16rpx;
}
.pos_8 {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.space-y-10 > view:not(:first-child),
.space-y-10 > text:not(:first-child),
.space-y-10 > image:not(:first-child) {
  margin-top: 20rpx;
}
.list-item {
  padding: 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}
.space-x-13 > view:not(:first-child),
.space-x-13 > text:not(:first-child),
.space-x-13 > image:not(:first-child) {
  margin-left: 26rpx;
}
.image_14 {
  width: 226rpx;
  height: 226rpx;
}
.group_16 {
  margin-right: 4rpx;
}
.space-y-46 > view:not(:first-child),
.space-y-46 > text:not(:first-child),
.space-y-46 > image:not(:first-child) {
  margin-top: 92rpx;
}
.text-wrapper_7 {
  padding: 8rpx 0 4rpx;
  background-color: #1677ff;
  border-radius: 4rpx;
  height: 32rpx;
}
.prefecture{
	  width: 702rpx;
	  /* height:470rpx; */
	  border-radius: 8rpx;
	  margin: 24rpx;
	  box-sizing: border-box;
	}
	.prefecture_top{
	  position: relative;
	}
	.prefecture_top image{
	  width: 702rpx; 
	  height: 92rpx;
	}
	.prefecture_ip_box{
	  position: absolute;
	  top: 0rpx;
	  left: 0rpx;
	  width: 702rpx; 
	  height: 92rpx;
	  color: #FFFFFF;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.prefecture_ip_text{
	  margin-left: 18rpx;
	  font-weight: bold;
	  font-size: 28rpx;
	}
	.prefecture_ip_more{
	  margin-right: 32rpx;
	  font-size: 24rpx;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.prefecture_line_con{
	  width: 100%;
	  height: 300rpx;
	  padding-top: 10rpx;
	  box-sizing: border-box;
	  display: flex;
	  justify-content: space-between;
	  background: #FFFFFF;
	  padding-left: 18rpx;
	  position: relative;
	  white-space: nowrap;
	}
	.prefecture_line_con_min{
		width: 185rpx;
		/* height: 304rpx; */
		margin-right: 50rpx;
		display: inline-flex;
		justify-content: space-between;
	}
	.prefecture_line_con_min_img{
		width: 150rpx;
		height: 170rpx;
		/* margin-left: 56rpx; */
		margin-bottom: 14rpx;
	}
	.prefecture_line_con_min_tit{
	  // width: 184rpx;
	  // height: 80rpx;
	  line-height: 40rpx;
	  font-size: 28rpx;
	  color: #333333;
	  margin: 14rpx 0 8rpx;
	  
	  display:inline-block;
	  width: 100%;
	  height: 100rpx;
	  font-family: Gibson;
	  word-break: break-all;
	  text-overflow: ellipsis;
	  word-wrap: break-word;
	  white-space: pre-wrap;
	}
	.prefecture_line_con_min_num{
	  width: 118px;
	  height: 54px;
	  font-size: 24rpx;
	  color: #FF3B30;
	  line-height: 34rpx;
	  padding-left: 20rpx;
	}
.font_14 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 18rpx;
  color: #ffffff;
}
.text_15 {
  margin: 0 4rpx;
  line-height: 19rpx;
}
.font_13 {
  font-size: 28rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 29rpx;
  color: #333333;
}
.text_14 {
  font-size: 30rpx;
  line-height: 28rpx;
}
.group_17 {
  line-height: 29rpx;
  height: 31rpx;
}
.font_15 {
  font-size: 24rpx;
  font-family: PingFangSC;
  line-height: 18rpx;
  font-weight: 600;
  color: #ff3b30;
}
.text_16 {
  line-height: 17rpx;
}
.text-wrapper_8 {
  margin-right: 16rpx;
  padding: 12rpx 0;
  background-color: #1677ff;
  border-radius: 23rpx;
  width: 112rpx;
  height: 46rpx;
}
.text_17 {
  line-height: 22rpx;
}
.section_13 {
  padding: 8rpx 0;
  background-color: #ffffff;
}
.image_15 {
  width: 48rpx;
  height: 48rpx;
}
.text_18 {
  line-height: 19rpx;
}
.group_18 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.font_16 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 18rpx;
  color: #999999;
}
.group_19 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.equal-division-item_3 {
  padding: 8rpx 0;
  width: 250rpx;
}
.space-y-8 > view:not(:first-child),
.space-y-8 > text:not(:first-child),
.space-y-8 > image:not(:first-child) {
  margin-top: 16rpx;
}
.text_19 {
  line-height: 19rpx;
}
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}
</style>
